<template>
  <slide>
    <div
      class="add-song-wrapper"
      v-show="addSongShow"
      @click.stop
      >
      <div class="title">
        添加歌曲到列表
        <i
          class="icon-close close-btn"
          @click="hide"
          ></i>
      </div>
      <div class="search-box-wrap">
        <search-box
          placeholder="搜索歌曲"
          @query="handleQueryChange"
          ref="searchBox"
          ></search-box>
      </div>
      <!-- 搜索结果列表组件 -->
      <div class="suggest-wrap" v-show="query">
        <suggest
          :query="query"
          :showSinger="false"
          @select="selectSuggest"
          @listScroll="blurInput"
          ></suggest>
      </div>
      <!-- 最新播放&搜索历史 -->
      <div class="shortcut" v-show="!query">
        <switches
          :switches="switches"
          :currentIndex="currentIndex"
          @switch="switchItem"
          ></switches>
        <scroll
          class="scroll"
          v-show="currentIndex === 0"
          :data="playHistory"
          ref="songList"
          >
          <song-list
            :songs="playHistory"
            @select="selectSong"
            ></song-list>
        </scroll>
        <scroll
          class="scroll"
          v-show="currentIndex === 1"
          :data="searchHistory"
          ref="searchList"
          >
          <search-list
            class="search-list"
            :list="searchHistory"
            @select="handleSelect"
            @delete="deleteSearchHistory"
            ></search-list>
        </scroll>
      </div>
      <!-- 顶部提示 -->
      <top-tip ref="topTip">
        <div class="top-tip-content">
          <i class="icon-ok"></i>
          <span>1首歌曲已经添加到播放队列</span>
        </div>
      </top-tip>
    </div>
  </slide>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { searchMixin } from 'common/js/mixin'
import Slide from 'base/slide/slide'
import SearchBox from 'base/search-box/search-box'
import Switches from 'base/switches/switches'
import SongList from 'base/song-list/song-list'
import Scroll from 'base/scroll/scroll'
import SearchList from 'base/search-list/search-list'
import TopTip from 'base/top-tip/top-tip'
import Suggest from 'components/suggest/suggest'

export default {
  name: 'add-song',
  mixins: [searchMixin],
  components: {
    Slide,
    SearchBox,
    Suggest,
    Switches,
    SongList,
    Scroll,
    SearchList,
    TopTip
  },
  data () {
    return {
      addSongShow: false,
      switches: ['最近播放', '搜索历史'],
      currentIndex: 0
    }
  },
  computed: {
    ...mapGetters([
      'playHistory'
    ])
  },
  methods: {
    show () {
      this.addSongShow = true

      this._refreshScroll()
    },
    hide () {
      this.addSongShow = false
      this.$refs.searchBox.addQuery('')
    },
    selectSuggest () {
      this.saveSearchHistory(this.query)
      this.$refs.topTip.show()
    },
    switchItem (index) {
      this.currentIndex = index
      this._refreshScroll()
    },
    selectSong (song, index) {
      if (index !== 0) {
        this.insertSong(song)
        this.$refs.topTip.show()
      }
    },
    handleSelect (query) {
      this.$refs.searchBox.addQuery(query)
    },
    _refreshScroll () {
      setTimeout(() => {
        if (this.currentIndex === 0) {
          this.$refs.songList.refresh()
        } else {
          this.$refs.searchList.refresh()
        }
      }, 20)
    },
    ...mapActions([
      'insertSong'
    ])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~common/stylus/variable.styl'
  .add-song-wrapper {
    position: fixed
    top: 0
    right: 0
    bottom: 0
    left: 0
    z-index: 1001
    background: $color-background
    .title {
      position: relative
      line-height: 44px
      text-align: center
      .close-btn {
        color: $color-theme
        position: absolute
        right: 0
        line-height: 44px
        padding-right: 20px
        font-size: 18px
      }
    }
    .search-box-wrap {
      padding: 20px
    }
    .suggest-wrap {
      >>> .scroll {
        top: 116px
        bottom: 0 !important
      }
    }
    .shortcut {
      .play-history {
        padding: 20px
        li+li {
          margin-top: 18px
        }
        li {
          line-height: 24px
          font-size: $font-size-medium
          p {
            color: $color-text-l
            overflow: hidden
            white-space: nowrap
            text-overflow: ellipsis
          }
        }
      }
      .scroll {
        position: absolute
        top: 146px
        right: 0
        bottom: 0
        left: 0
        overflow: hidden
        .search-list {
          padding: 20px
          margin-top: 0
        }
      }
    }
    .top-tip-content {
      .icon-ok {
        color: $color-theme
      }
    }
  }
</style>
